<template>
  <div class="main">
    <Header class="main_header"/>
    <div style="height: 63px;"></div>
    <div class="main_body">
      <div class="main_left">
        <div class="main_left_nav">
          <div v-for="(item,index) in menu" :key="index">
            <router-link :to="item.router">
              <div @click="addClass(index)" class="main_left_nav_item" :class="{'isActive':isActive===index}">
                <img :src="item.img" class="main_left_nav_item_img" alt="图片">
                {{ item.menu_name }}
              </div>
            </router-link>
          </div>
        </div>
      </div>
      <div class="main_right">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Header from '@/components/header/index.vue'
import {ref} from "vue";

//是否激活
const isActive = ref(0)

const menu = [
  {
    router: "/my/userinfo",
    menu_name: "个人资料",
    img: new URL('../../assets/img/personalCenter/userinfo.png',import.meta.url).href
  },
  {
    router: "/my/myFriends",
    menu_name: "我的好友",
    img: new URL('../../assets/img/personalCenter/myFriends.png',import.meta.url).href
  },
  {
    router: "/my/myCollection",
    menu_name: "我的收藏",
    img: new URL('../../assets/img/personalCenter/myCollection.png',import.meta.url).href
  },
  {
    router: "/my/myAsk",
    menu_name: "我的提问",
    img: new URL('../../assets/img/personalCenter/myAsk.png',import.meta.url).href
  },
  {
    router: "/my/myArticle",
    menu_name: "我的文章",
    img: new URL('../../assets/img/personalCenter/myArticle.png',import.meta.url).href
  },
  {
    router: "/my/browsingHistory",
    menu_name: "浏览历史",
    img: new URL('../../assets/img/personalCenter/browsingHistory.png',import.meta.url).href
  },
]

//导航条动态样式
const addClass = (index: number) => {
  isActive.value = index
}
</script>

<style lang="less" scoped>
.main {
  height: 100%;
  width: 100%;

  .main_header {
    height: 70px;
    position: fixed;
    width: 100%;
    z-index: 99999;
  }

  .main_body {
    margin-top: 7px;
    display: flex;

    .main_left {
      background-image: linear-gradient(-20deg, #616161 0%, #9bc5c3 100%);
      height: 100vh;
      position: fixed;
      .main_left_nav {
        .main_left_nav_item {
          width: 200px;
          text-align: center;
          padding: 20px;
          font-size: 15px;

          .main_left_nav_item_img{
            width: 25px;
            height: 25px;
            margin-bottom: 4px;
            margin-right: 1px;
          }
        }

        .isActive {
          background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
        }
      }
    }

    .main_right {
      margin-left: 200px;
      position: fixed;
      height: 100vh;
      width: 90%;
      background-color: #CDDCDC; background-image: radial-gradient(at 50% 100%, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%), linear-gradient(to bottom, rgba(255,255,255,0.25) 0%, rgba(0,0,0,0.25) 100%); background-blend-mode: screen, overlay;
    }
  }
}
</style>